<link rel="stylesheet" type="text/css" href="/styles/combat.css" />
<div class=combat >
    FIGHT
    <form action={{path}} method='post'> {% csrf_token %}
    <table class=side id=sideA>
    <tr>
        SIDE A
        {% for combatant in sideACombatants %}
            <td class="combatant" {% ifequal combatant.id  currentCombatant.id %} id="current" {% endifequal %} >
            	{% with combatant.individual as individual%}
                	{% include 'monster/indThumb.html' %}
                {% endwith %}
                <input type='radio' name='target' value={{combatant.id}} />
            </td>
        {% endfor %}
    </tr>
    </table>
    MESSAGES
    <div class=messages>
        {% for message in Messages %}
            <li class="message">{{message.message}}</li>
        {% endfor %}
    </div>

    <table class=side id=sideB>
    <tr>
        SIDE B
        {% for combatant in sideBCombatants %}
            	<td class="combatant">
            	{% with combatant.individual as individual  %}
            		{% include 'monster/indThumb.html' %}
            	{% endwith %}
            	<input type='radio' name='target' value={{combatant.id}} />
            	</td>
        {% endfor %}
    </tr>
    </table>
    {% if currentState == 3 %}
    	</form>
        <form action= {{path}} method="post">
        <input type ='submit' value='End Combat'>
        <input type ='hidden' name='endCombat' value ='True' >
        </form>
    {% else %}
    	{% if isActive %}
        	<div class=actions>
            	<select name='action'>
	                {% for action in actionsAvailable %}
                    	<option value= {{action.id}} >{{action.name}}</option>
                	{% endfor%}
            	</select>
        	</div>
        	<input type='submit' value='Attack'/>
        	</form>
        {% endif %} 
    {% endif %}
        
            
</div>
